<template>
	<DiyPage>
		<view class="header-wrap">
			<block v-for="(item, index) in pageConfig" :key="index">
				<diy-menu-header v-if="item.component == 'diy-menu-header'" />
				<diy-notice-bar v-else-if="item.component == 'diy-notice-bar'" :noticeList="noticeList" />
				<diy-banner :animationData="animationData" class="banner" v-else-if="item.component == 'diy-banner'" />
			</block>
		</view>
		<view class="content">
			<diy-menu :transform="menuTransform" @open="handleOpenDetail" @upTouch="upTouch" @downTouch="downTouch" />
		</view>
		<view class="diy-shopping-cart">
			<view class="info">
				<view @tap.stop="popup=!popup" class="bag">
					<uni-icons class="element" color='#000' custom-prefix="iconfont" type="icon-bag" size="30" />
					<view class="element qty">6</view>
				</view>
				<view class="amount">￥42.0</view>
			</view>
			<view @tap="navigteToCheckout" class="checkout-cart">结算</view>
		</view>
		<cc-slide-panel :max-height="480" v-model:visible="popup">
			<view class="cc-popup-container">
				<view class="cc-popup-header">
					<view class="cc-popup-header-choose">
						<cc-form-checkbox shape="circle" v-model:checked="checked" primaryColor="#000" />
						<view class="choose-info">
							<text class="qty">已选购10件</text>
							<text class="comment">
								打包费<text class="packaging-fee">￥10</text>
								<uni-icons class="element" custom-prefix="iconfont" type="icon-bangzhu" size="14" />
							</text>
						</view>
					</view>
					<view class="cc-popup-header-delete"><uni-icons custom-prefix="iconfont" type="icon-delete"	size="16" /></view>
				</view>
				<view class="cc-popup-divider"></view>
				<view class="cc-popup-content">
					<view class="goods-list">
						<view v-for="goods in goodsList" :key="goods.id" class="goods-item">
							<view class="goods-image-container">
								<cc-form-checkbox shape="circle" v-model:checked="checked" primaryColor="#000" />
								<image class="goods-image" :src="goods.cover" mode="aspectFill"></image>
							</view>
							<view class="goods-info">
								<view class="goods-choose-info">
									<view class="goods-name">{{ goods.name }}</view>
									<view class="goods-sku">
										<view class="sku">
											<view class="sku-item" v-for="sku in goods.sku">{{sku}}</view>
										</view>
										<view class="navigate">
											<uni-icons color="#999" type="down" size="16"></uni-icons>
										</view>
									</view>
								</view>

								<view class="goods-choose">
									<view class="goods-price">
										<view class="price-original"><text class="comment">¥</text>{{ goods.price }}
										</view>
										<view class="price-discount"><text class="comment">¥</text>{{ goods.price }}优惠价
										</view>
									</view>
									<cc-number />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</cc-slide-panel>
		<DiyGoodsDetail ref="goodsDetailRef" />
	</DiyPage>
</template>

<script setup>
	import DiyPage from '@/diy/diy-page/diy-page.vue';
	import DiyMenu from '@/diy/diy-menu/diy-menu.vue'
	import DiyBanner from '@/diy/diy-banner/diy-banner.vue'
	import DiyMenuHeader from '@/diy/diy-menu-header/diy-menu-header.vue';
	import DiyNoticeBar from '@/diy/diy-notice-bar/diy-notice-bar.vue';
	import DiyGoodsDetail from '@/diy/diy-goods-detail/diy-goods-detail.vue';

	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		onShow,
		onReady
	} from '@dcloudio/uni-app';

	const goodsDetailRef = ref(null);

	const handleOpenDetail = (goods) => {
		goodsDetailRef.value.open();
	}

	const navigteToCheckout = () => {
		uni.navigateTo({
			url: '/pagesOrder/checkout/checkout'
		})
	}

	const checked = ref(true);
	const popup = ref(false);
	const goodsList = ref([{
			id: 101,
			name: '珍珠奶茶',
			price: 18,
			sku: ['冰沙', '推荐', '少甜(推荐)', '绿妍(推荐)', '可降解吸管'],
			cover: '/static/images/products/1.jpg'
		},
		{
			id: 102,
			name: '面包',
			price: 16,
			sku: ['冰沙', '推荐', '少甜(推荐)', '绿妍(推荐)', '可降解吸管'],
			cover: '/static/images/products/1.jpg'
		}
	])

	const menuTransform = ref({
		maxPanelHeight: 0,
		minPanelHeight: 0,
	});
	const animationData = ref({});

	onMounted(() => {
		initMenuPanelHeight();
	})

	onReady(() => {
		uni.onWindowResize((res) => {
			const {
				windowWidth,
				windowHeight
			} = res.size;
			console.log(res.size);
		});
	})

	const {
		proxy
	} = getCurrentInstance();
	// 初始化面板高度
	const initMenuPanelHeight = async () => {

		const query = uni.createSelectorQuery().in(proxy);

		query.select('.content').boundingClientRect();
		query.select('.banner').boundingClientRect();

		query.exec((res) => {
			const content = res[0];
			const banner = res[1];

			let min = content.height;
			let max = min + banner.height;

			menuTransform.value = {
				maxPanelHeight: max,
				minPanelHeight: min,
			}
		});
	}

	// 透明度val 0到1
	const startFade = (val) => {
		const animation = uni.createAnimation({
			duration: 500,
			timingFunction: "ease-in-out",
		});
		// 链式操作：透明度val，同时缩小至 0%
		animation.opacity(val).scale(1).step();
		animationData.value = animation.export();
	}

	const upTouch = () => {
		startFade(0);
	}

	const downTouch = () => {
		startFade(1)
	}

	const pageConfig = ref([{
			component: 'diy-menu-header',
			assemblyProps: {},
		}, {
			component: 'diy-notice-bar',
			assemblyProps: {},
		},
		{
			component: 'diy-banner',
			assemblyProps: {},
		},
		{
			component: 'diy-menu',
			assemblyProps: {},
		}
	]);

	const noticeList = ref([{
			id: 1,
			title: '征程这些伟大精神 串连起中国***人的精神谱系连起中国***人的精神谱连起中国***人的精神谱连起中国***人的精神谱'
		},
		{
			id: 2,
			title: '增强水运发展新动能 前5月港口货物吞吐量增长7.9%'
		},
		{
			id: 3,
			title: '多地持续高温 各地采取措施积极应对'
		},
		{
			id: 4,
			title: '中非经贸博览会见证中非合作深度'
		},
		{
			id: 5,
			title: '国安家安得民心 保驾护航促治兴'
		}
	]);

	onShow(() => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300,
		});
	});
</script>

<style lang="scss" scoped>
	@import "@/style/var.scss";

	page {
		/* 禁止滚动 */
		overflow: hidden !important;
		/* 高度占满视口 */
		height: 100vh !important;
	}

	.header-wrap {
		background: #fff;
	}

	.content {
		position: relative;
		flex: 1;
	}

	.fade-slide-enter-active,
	.fade-slide-leave-active {
		transition: all 0.5s ease;
	}

	.fade-slide-enter {
		opacity: 0;
		transform: translateX(50px);
		/* 进入时从右侧滑入 */
	}

	.fade-slide-leave-to {
		opacity: 0;
		transform: translateX(-50px);
		/* 离开时向左滑出 */
	}

	.animated-box {
		width: 200px;
		height: 200px;
		background: #4fc08d;
		margin-top: 20px;
	}

	.diy-shopping-cart {
		position: absolute;
		bottom: 0rpx;
		left: 0;
		right: 0;
		height: 100rpx;
		z-index: 999;
		display: flex;

		.info {
			flex: 1;
			background: #f4f4f4;
			display: flex;
			align-items: center;
			padding-left: 40rpx;

			.bag {
				width: 32px;
				height: 32px;
				margin-right: 30rpx;
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: 1fr;
				place-items: end center;

				.element {
					grid-column: 1 / 2;
					grid-row: 1 / 2;
				}

				.qty {
					font-size: 12px;
					font-weight: bold;
					padding: 1px;
					background: #e0ecfd;
					border-radius: 50%;
					margin-left: 3px;
					margin-bottom: 2px;
				}
			}

			.amount {
				font-size: 32rpx;
			}
		}

		.checkout-cart {
			width: 200rpx;
			color: #fff;
			background: $uni-primary-color;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.cc-popup-container {
		padding: 0rpx 40rpx;

		.cc-popup-header {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.cc-popup-header-choose {
				height: 100%;
				display: inherit;
				align-items: center;
				flex: 1;
				gap: 15rpx;

				.choose-info {
					display: inherit;
					gap: 10rpx;
					align-items: flex-end;

					.qty {
						font-size: 34rpx;
						letter-spacing: 0.08em;
					}

					.comment {
						display: inherit;
						font-size: 28rpx;
						align-items: center;

						.packaging-fee {
							color: #6c6c6c;
							margin-right: 2rpx;
						}
					}

				}
			}

			.cc-popup-header-delete {
				width: 40rpx;
			}
		}

		.cc-popup-divider {
			height: 1rpx;
			background-color: #e7e7e7;
			opacity: 0.6;
		}

		.cc-popup-content {

			.goods-list {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
			}

			.goods-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 40rpx;
				background: #fff;
				border-radius: 12rpx;
				padding: 20rpx 0rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

				.goods-image-container {
					display: inherit;
					align-items: center;
					gap: 20rpx;

					.goods-image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 8rpx;
						object-fit: cover;
					}
				}

				.goods-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 15rpx;
					margin-left: 20rpx;

					.goods-choose-info {
						display: inherit;
						flex-direction: column;
						gap: 15rpx;
						height: 160rpx;

						.goods-name {
							font-size: 32rpx;
							color: $uni-primary-color;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.goods-sku {
							flex: 1;
							display: flex;
							flex-direction: row;
							align-items: center;
							background: #f4f4f4;
							border-radius: 2rpx;
							padding: 5rpx;

							.sku {
								display: flex;
								flex-direction: row;
								color: #999;
								font-size: 24rpx;
								flex-wrap: wrap;
								flex: 1;

								.sku-item {
									padding: 5rpx;
								}
							}

							.navigate {}
						}
					}
				}

				.goods-choose {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.goods-price {
						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 10rpx;

						.price-original {
							font-size: 36rpx;
							color: $uni-primary-color;

							.comment {
								font-size: 0.8em;
							}
						}

						.price-discount {
							font-size: 30rpx;
							background: #eaeadd;
							color: #aaa084;
							padding-left: 10rpx;
							padding-right: 10rpx;
							border-top: 1rpx solid #dadacc;
							border-bottom: 1rpx solid #dadacc;

							.comment {
								font-size: 0.9em;
							}
						}
					}

					.add-btn {
						width: 50rpx;
						height: 50rpx;
						border-radius: 20%;
						background: $uni-primary-color;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: 0.3s all;
						position: relative;

						.badge {
							position: absolute;
							width: 30rpx;
							height: 30rpx;
							color: #fff;
							background: $uni-primary-color;
							line-height: 30rpx;
							text-align: center;
							top: -20rpx;
							right: -20rpx;
							border: 1rpx solid #fff;
							border-radius: 50%;
							font-size: 20rpx;
							font-weight: bold;
						}

						&:active {
							transform: scale(0.9);
						}
					}
				}
			}
		}
	}
</style>